/**
 * 执行了 ReactDOM.render(<MyComponent></MyComponent>,...)发生了什么
 * 1. React解析组件标签,找到了MyComponents组件
 * 2. 发现组件是使用类定义的,随后new出来该实例,并通过该实例调用原型对象上的render方法
 * 3. 将render返回的虚拟DOM转为真实DOM,随后呈现在页面上.
 */
class Weather extends React.Component{
	state={isHot:true};
	changeWeather=()=> {
		// 这个函数放在Weather的原型对象上,供实例使用,
		// 由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用
		// 类中的方法默认开启了局部严格模式,所以changeWeather中this为undefined
		console.log(this)
		// this.state.isHot=!this.state.isHot;  错误 不可直接更改
		this.setState({isHot:!this.state.isHot});
	}
	render(){
		return <h2 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热':'凉爽'}</h2>
	}
}
ReactDOM.render(<Weather></Weather>,document.getElementById('test'));

